<template>
    <div id="order">
        <div class="fiexd_search">
            <div class="fiexd_list">
                <div class="fiexd_lefts" @click="fiexdGo">
                    <img src="../../assets/rightcon.png">
                </div>
                <div class="fiexd_conter">
                    <yd-search v-model="value" cancel-text='' placeholder="订单编号" :on-cancel='delHandler' :on-submit="submitHandler"></yd-search>
                </div>
            </div>
            <yd-flexbox class="order_box">
                <yd-flexbox-item v-for="(item,index) in orderName" :key="index" :class="{active:isActive[index]}" @click.native="activeOrder(item,index)">
                    <span>{{item.title}}</span>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <yd-infinitescroll style="margin-top:2.2rem" ref="infinitescrollDemo">
            <yd-list theme="5" class="loadList" slot="list">
                <div class="orderList" v-for="(item, key) in list" :key="key">
                    <yd-flexbox class="order_title">
                        <div class="order_title_left">订单编号：{{item.orderSn}}</div>
                        <yd-flexbox-item v-if="item.orderState == 10" class="order_title_right">支付剩余时间
                            <b>
                                <yd-countdown :time="1800-(newData-item.addTime)" format="{%h}:{%m}:{%s}" timetype="second"></yd-countdown>
                            </b>
                        </yd-flexbox-item>
                    </yd-flexbox>
                    <yd-flexbox class="order_center" @click.native='orderlist(item)'>
                        <div class="order_center_left">
                            <img v-if='indexs<3' v-for="(itm,indexs) in item.orderGoodsList" :key="indexs" :src="imgUrl+itm.goodsImage">
                        </div>
                        <yd-flexbox-item class="order_center_right">
                            {{item.orderGoodsList[0].goodsName}}
                            <span v-if="item.orderGoodsList.length>1">...</span>
                        </yd-flexbox-item>
                        <span v-if="item.buyType==2" class="order_fiexd">送礼单</span>
                        <img v-if="item.buyType==2" class="order_img3" src="../../assets/order3.png">
                        <span v-if="item.paymentCode==3" class="order_fiexd">收礼单</span>
                        <img v-if="item.paymentCode==3" class="order_img" src="../../assets/order.png">
                        <img v-if="item.paymentCode==3" class="order_img1" src="../../assets/order1.png">
                        <img v-if="item.paymentCode==3" class="order_img2" src="../../assets/order2.png">
                    </yd-flexbox>
                    <yd-flexbox class="order_bottom">
                        <yd-flexbox-item class="order_bottom_right">
                            <span style="color:#4a4a4a">共{{item.goodsNums}}件商品</span>
                            <span style="margin:0 10px">{{item.orderState | oState}}</span>
                            <span>￥
                                <yd-countup :endnum="item.orderAmount" duration="0.1" decimals="2" separator=","></yd-countup>
                            </span>
                        </yd-flexbox-item>
                    </yd-flexbox>
                    <yd-flexbox class="order_bottom_btn" v-if="item.orderState == 10">
                        <yd-flexbox-item class="order_bottom_right">
                            <yd-button type="hollow" @click.native="purchaseBtn(item)" style="margin-right:0.1rem">去支付</yd-button>
                            <yd-button type="danger" @click.native="tuiBtn(item)" style="margin-right:0.1rem">取消订单</yd-button>
                        </yd-flexbox-item>
                    </yd-flexbox>
                    <yd-flexbox class="order_bottom_btn" v-if="item.orderState == 30">
                        <yd-flexbox-item class="order_bottom_right">
                            <yd-button type="danger" @click.native="queBtn(item)" style="margin-right:0.1rem">确认收货</yd-button>
                        </yd-flexbox-item>
                    </yd-flexbox>
                </div>
            </yd-list>
            <!-- 数据全部加载完毕显示 -->
            <span slot="doneTip">—— 到底啦 ——</span>
            <!-- 加载中提示，不指定，将显示默认加载中图标 -->
            <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />
        </yd-infinitescroll>
    </div>
</template>
<script>

export default {
    name: 'order',
    data() {
        return {
            imgUrl: this.CONSTANT.imgBaseUrl,
            value: '',
            orderName: [
                {
                    title: '全部',
                    state: ''
                },
                {
                    title: '待付款',
                    state: 10
                },
                {
                    title: '待发货',
                    state: 20
                },
                {
                    title: '已发货',
                    state: 30
                },
                {
                    title: '已取消',
                    state: 0
                }
            ],
            states: '',
            isActive: [true],
            list: [],
            page: 1,
            pageSize: 100,
            newData: 0,
            href: '',
            pageFlg: ''
        }
    },
    created: function() {
        // 页面加载前的等待时间（支付页面的支付处理需要一定的时间）
        let waitTime = 1;
        // 该页面的迁移源有：paymoney、me、receiveGifts、orderlist页面
        // paymoney页面没有设置pageFlg
        // me、receiveGifts页面设置为各自的页面
        // orderlist页面设置为order的跳转前的页面
        this.pageFlg = this.$route.query.pageFlg || '';
        if (this.pageFlg == undefined || this.pageFlg == '') {
            // orderlist页面（支付） --> paymoney页面(返回) -->  orderlist页面
            let orderId = this.$route.query.orderId || '';
            if (orderId != undefined && orderId != '') {
                this.$router.push('/orderlist?orderId=' + orderId + '&pageFlg=me');
            } else {
                // 支付处理后的跳转
                this.pageFlg = "paymoney";
                waitTime = 2500;
            }
        }

        let myDate = new Date();
        this.newData = parseInt((myDate.getTime()) / 1000);
        this.href = window.location.href.split('#')[0];
        //this.init(); 
        this.$dialog.loading.open('请稍后');
        setTimeout(() => {
                            this.init();
                          }, waitTime);
    },
    mounted: function() {
        // 企业微信支付处理的返回需要
        this.pushHistory();
        let float = false;
        setTimeout(() => {float = true;}, 200);

        window.addEventListener("popstate", (e) => {
                if(float)  {
                    float = false;
                    // window.alert('我监听到了浏览器的返回按钮事件啦');
                    if (this.pageFlg == 'paymoney') {
                        this.$router.push('/');
                    } else if (this.pageFlg == 'me') {
                        this.$router.push('/me?tranFlg=order');
                    } else {
                        this.$router.push(this.pageFlg);
                    }
                }
                this.pushHistory();
            }, false);
    },
    filters: {
        oState(item) {
            let stateText = '';
            //"orderState": 订单状态：-1:所有订单;0:已取消;10默认:未付款;20:已付款;30:已发货;40:已完成;50:待评价;75:已结算;
            if (item == 0) {
                return "已取消";
            } else if (item == 10) {
                return "未付款";
            } else if (item == 20) {
                return "待发货";
            } else if (item == 30) {
                return "已发货";
            } else if (item == 40) {
                return "已完成";
            } else if (item == 75) {
                return "已完成";
            }
        },
    },
    methods: {
        init() {
           // this.$dialog.loading.open('请稍后');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'order/list?state=' + this.states + '&p=' + this.page + '&pageSize=' + this.pageSize + '&orderSn=' + this.value)
                .then((response) => {
                    if (response.data.object) {
                        for (var i = 0; i < response.data.object.length; i++) {
                            let goodsNums = 0;
                            for (var j = 0; j < response.data.object[i].orderGoodsList.length; j++) {
                                goodsNums += response.data.object[i].orderGoodsList[j].goodsNum;
                            }
                            response.data.object[i].goodsNums = goodsNums;
                        }
                        this.list = response.data.object;
                        this.$dialog.loading.close();
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        //订单详情
        orderlist(item) {
            if (this.pageFlg == "paymoney") {
                this.pageFlg = "paymoney_order";
            }
            this.$router.push('/orderlist?orderId=' + item.orderId + '&pageFlg=' + this.pageFlg);
        },
        //支付
        purchaseBtn(item) {
            // item.orderSn:19位的OrderSn
            // item.orderBatchNumber:8位的OrderBatchNumber
            // item.orderId:四位的OrderId
            let param = 'orderSn=' + item.orderSn + '&orderId=' + item.orderBatchNumber + '&orderlist=' + item.orderId + '&buyType=' + item.buyType + '&orderAmount=' + item.orderAmount;
            let href = '/pay/paymoney?' + param + '&pageFlg=order';
            this.$router.push(href);
        },
        //确认收货
        queBtn(item) {
            this.$dialog.confirm({
                title: '提示',
                mes: '确定收货?',
                opts: () => {
                    this.$dialog.loading.open('请稍后');
                    this.$axios.get(this.CONSTANT.wapiBaseUrl + 'order/sureReceiveGoods?orderId=' + item.orderId)
                        .then((response) => {
                            this.$dialog.loading.close();
                            if (response.data.status == 1) {
                                this.$dialog.toast({ mes: '确认收货成功', timeout: 600 });
                            } else {
                                this.$dialog.toast({ mes: response.data.msg, timeout: 600 });
                            }
                            this.init();
                        }).catch((error) => {
                            this.$dialog.loading.close();
                        });
                }
            });
        },
        //取消订单
        tuiBtn(item) {
            this.$dialog.confirm({
                title: '提示',
                mes: '确定取消订单?',
                opts: () => {
                    this.$dialog.loading.open('请稍后');
                    this.$axios.get(this.CONSTANT.wapiBaseUrl + 'order/cancel?orderId=' + item.orderId)
                        .then((response) => {
                            this.$dialog.loading.close();
                            if (response.data.status == 1) {
                                this.$dialog.toast({ mes: '已取消订单', timeout: 600 });
                            } else {
                                this.$dialog.toast({ mes: response.data.msg, timeout: 600 });
                            }
                            this.init();
                        }).catch((error) => {
                            this.$dialog.loading.close();
                        });
                }
            });
        },
        fiexdGo() {
            //this.$router.push('/me');
            if (this.pageFlg == 'paymoney') {
                this.$router.push('/');
            } else {
                this.$router.push(this.pageFlg);
            }
        },
        activeOrder(item, index) {
            if (index == 1) {
                let myDate = new Date();
                this.newData = parseInt((myDate.getTime()) / 1000);
            }
            this.states = item.state;
            this.isActive = [];
            this.value = '';
            this.$set(this.isActive, index, true);
            this.list = [];
            this.$dialog.loading.open('请稍后');
            this.init();
        },
        submitHandler() {
            this.$dialog.loading.open('请稍后');
            this.init();
        },
        delHandler() {
            this.value = '';
            this.$dialog.loading.open('请稍后');
            this.init();
        },
        //下拉加载
        loadList() {
            this.$dialog.loading.open('请稍后');
            this.init();
        },
        pushHistory() {
            let state = {title: "order", url: "#"};
            window.history.pushState(state, "我的订单", "#");
        }
    }
}
</script>
<style  scoped>
.fiexd_search {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 9;
    box-shadow: 0 3px 6px #DACDBA;
}

.orderList {
    width: 100%;
    height: auto;
    border-bottom: 10px solid #F3EEE8;
    overflow: hidden;
}

.orderList:last-of-type {
    border: 0;
}

.order_title {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.2rem;
    height: 0.85rem;
    line-height: 0.85rem;
    overflow: hidden;
    font-size: 14px;
    color: #4a4a4a;
}

.order_fiexd {
    width: auto;
    height: 22px;
    line-height: 22px;
    /* border: 1px solid #666; */
    border-radius: 2px;
    color: #666;
    padding: 0 3px;
    font-size: 12px;
    position: absolute;
    right: 5px;
    top: 5px;
}

.order_img {
    position: absolute;
    right: 15px;
    bottom: 0px;
    width: 1.6rem!important;
}

.order_img1 {
    position: absolute;
    right: 1.6rem;
    top: 8px;
    width: 0.7rem!important;
}

.order_img2 {
    position: absolute;
    right: 1.64rem;
    bottom: 0px;
    width: 0.5rem!important;
}

.order_img3 {
    position: absolute;
    right: 1rem;
    bottom: 0.3rem;
    width: 2rem!important;
}

.order_title_left {
    text-align: left;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order_title_right {
    min-width: 3.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order_bottom_btn {
    padding: 0.2rem 0.1rem;
    text-align: right;
}

.order_center {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.2rem;
    height: 1.8rem;
    line-height: 1.8rem;
    overflow: hidden;
    font-size: 14px;
    position: relative;
    background: #fef9f9;
    color: #4a4a4a;
}

.order_bottom {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.2rem;
    height: 0.7rem;
    line-height: 0.7rem;
    text-align: right;
    overflow: hidden;
    font-size: 14px;
    border-bottom: 1px solid #D7D7D7;
}

.order_center .order_center_left {
    width: auto;
    min-width: 1.5rem;
    height: 1.5rem;
    position: relative;
    z-index: 8;
}

.order_center .order_center_left img {
    width: 1.5rem;
    float: left;
    margin-right: 5px;
    min-height: 100%;
}

.order_center_right {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 0.15rem;
    font-size: 14px;
    position: relative;
    z-index: 8;
}

.order_bottom_right {
    color: #E30313;
}

.order_title_right {
    text-align: right;
}

.order_title b {
    font-weight: 400;
    color: #E30313;
}

.orderList img {
    width: 100%;
    display: block;
}

.order_box {
    text-align: center;
    line-height: 0.6rem;
    font-size: 14px;
    border-top: 1px solid #C6C6C6;
    padding: 0.2rem 0;
}

.order_box span {
    display: block;
    width: 80%;
    height: 0.6rem;
    line-height: 0.6rem;
    margin: 0 auto;
    background: #fff;
    color: #5A5859;
    border-radius: 0.4rem;
}

.order_box .active span {
    background: #FB6C68;
    color: #fff;
}

.fiexd_list {
    width: 100%;
    height: auto;
    padding: 0.2rem 0;
    overflow: hidden;
}

.fiexd_list .fiexd_lefts {
    float: left;
    width: 0.8rem;
    overflow: hidden;
    text-align: center;
}

.fiexd_lefts img {
    width: 0.4rem;
    height: 0.4rem;
    display: block;
    margin: 0.12rem auto;
}

.fiexd_list .fiexd_conter {
    float: left;
    width: calc(100% - 1.4rem);
    overflow: hidden;
    text-align: center;
}
</style>

<style>
#order .yd-search-input:before,
#order .yd-search-input:after {
    border: 0;
}

#order .yd-search-input {
    padding: 2px 8px;
    border-radius: 20px;
    background-color: #f5f5f5!important;
}

#order .yd-search-input>.search-input {
    background-color: #f5f5f5!important;
}

#order .yd-search-input>.cancel-text {
    padding: 0;
}

#order .yd-list-donetip {
    background: #f5f5f5;
}
</style>